<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DoctorCard from './DoctorCard.vue'
import { useWindowSize } from '@vueuse/core'
import type { DoctorList } from '@/types/consult'
import { getDoctorList } from '@/services/consult'

const { width } = useWindowSize()

const list = ref<DoctorList>()
const getList = async () => {
  const res = await getDoctorList({ current: 1, pageSize: 5 })
  list.value = res.data.rows
}
onMounted(() => {
  getList()
})
</script>

<template>
  <div class="follow-doctor">
    <div className="head">
      <p>推荐关注</p>
      <a href="javascript:;"> 查看更多<i class="van-icon van-icon-arrow" /></a>
    </div>
    <div class="body">
      <!--
      知识点【尺寸设备适配】：
       这里如果直接设计者width为一个固定值，在不同尺寸的视口中看，元素的展示效果会不一样，需要做适配
       原生写法windows.innerWidth获取视口宽度，然后再利用这个宽度计算出元素的宽度
       但是推荐使用vueuse插件实现，更简单

       下面的150是在375设计图中的宽度，通过这个计算其他尺寸的宽度

      -->
      <div class="no-doctor" v-if="!list?.length">抱歉，医生数据维护中~</div>
      <van-swipe v-else :width="(150 / 375) * width" :show-indicators="false" :loop="false">
        <van-swipe-item v-for="item in list" :key="item.id">
          <doctor-card :item />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.follow-doctor {
  background-color: var(--cp-bg);
  height: 250px;
  .head {
    display: flex;
    justify-content: space-between;
    height: 45px;
    align-items: center;
    padding: 0 15px;
    font-size: 13px;
    // 知识点【scss】：一级元素的子元素，使用 > 号，严格限制是一级子元素a标签
    > a {
      color: var(--cp-tip);
    }
  }
  .body {
    width: 100%;
    overflow: hidden;

    .no-doctor {
      height: 180px;
      line-height: 180px;
      text-align: center;
      color: var(--cp-tip);
      font-size: 13px;
    }
  }
}
</style>
